import React, { Component } from 'react';

import { Tree, Row, Col, Button, Input } from 'antd';

const { TreeNode } = Tree;

export default class Demo extends Component {
    state = {
        treeData: [{
            title: 'parent 1',
            key: '0-0',
            showEdit: false,
            children: [
                {
                    title: 'parent 1-0',
                    key: '0-0-0',
                    showEdit: false,
                    children: [
                        {
                            title: 'leaf',
                            key: '0-0-0-0',
                            showEdit: false,
                        },
                        {
                            title: 'leaf',
                            key: '0-0-0-1',
                            showEdit: false,
                        },
                    ],
                },
                {
                    title: 'parent 1-1',
                    key: '0-0-1',
                    showEdit: false,
                    children: [
                        {
                            title: 'sss',
                            key: '0-0-1-0',
                            showEdit: false,
                        },
                    ],
                },
            ],
        }]

    }

    del = (parent, data, i) => {
        console.log(data)
        parent.splice(i, 1);
        this.setState({});
    }

    add = (parent, data, i) => {
        console.log(data)
        //...
    }

    onChangeHandler = (data, k, value) => {
        Object.assign(data, { [ k ]: value });
        this.setState({});
    }

    render() {
        const { treeData } = this.state;

        const treeBtn = (parent, data, index) => (
            <Row>
                <Col span={ 12 } align="left">
                    {
                        data.showEdit?
                            <Input value={data.title} onChange={ v => this.onChangeHandler(data,'title',  v.target.value) } onBlur={ () => this.onChangeHandler(data,'showEdit',  false) }/> :
                            data.title
                    }
                </Col>
                <Col span={ 12 } align="right">
                    <Button type="link" size="small" onClick={ () => this.onChangeHandler(data,'showEdit',  true) }>编辑</Button>
                    <Button type="link" size="small" onClick={ () => this.add(parent, data, index) }>add</Button>
                    <Button type="link" size="small" onClick={ () => this.del(parent, data, index) }>del</Button>
                </Col>
            </Row>
        );
        const renderTreeNodes = data => data.map((item, index) => {
            const { title, ...arg } = item;
            const children = item.children;
            if (children) {
                return (
                    <TreeNode title={ treeBtn(data, item, index) } { ...arg } dataRef={ item }>
                        { renderTreeNodes(children) }
                    </TreeNode>
                );
            }
            return <TreeNode title={ treeBtn(data, item, index) } { ...arg } dataRef={item} />;
        })
        return (
            <div>
                <Tree checkable>
                    { renderTreeNodes(treeData) }
                </Tree>
            </div>
        )
    }
}